<template>
  <div class="right-height bg-c-fff mb70 trading-record">
    <h2 class="box-title rel">数据中心</h2>
    <div class="right-box">
      <div class="main">
        <h3>用户数据统计</h3>
        <div class="box">
          <h4>今日注册企业用户数</h4>
          <p>{{businessNumT}}个</p>
          <h4>注册企业用户总数</h4>
          <p>{{businessNumA}}个</p>
          <ul>
            <li>1.已通过资质审核用户数：{{businessNumPass}}个</li>
            <li>2.等待资质审核用户数：{{businessNumWait}}个</li>
            <li>3.已拒绝资质审核用户数：{{businessNumRefuse}}个</li>
          </ul>
        </div>
        <div class="box">
          <h4>今日注册律所数</h4>
          <p>{{lawfirmNumA}}个</p>
          <h4>注册律所总数</h4>
          <p>{{lawfirmNumPass}}个</p>
          <ul>
            <li>1.已通过资质审核律所数：{{lawfirmNumT}}个</li>
            <li>2.等待资质审核律所数：{{lawfirmNumWait}}个</li>
            <li>3.已拒绝资质审核律所数：{{lawfirmNumRefuse}}个</li>
          </ul>
        </div>
        <div class="box">
          <h4>今日注册律师数</h4>
          <p>{{lawyerNumT}}个</p>
          <h4>注册律师总数</h4>
          <p>{{lawyerNumA}}个</p>
          <ul>
            <li>1.已通过资质审核律师数：{{lawyerNumPass}}个</li>
            <li>2.等待资质审核律师数：{{lawyerNumWait}}个</li>
            <li>3.已拒绝资质审核律师数：{{lawyerNumRefuse}}个</li>
          </ul>
        </div>
      </div>
      <div class="main">
        <h3>交易数据统计</h3>
        <div class="box">
          <h4>今日交易额</h4>
          <p>￥{{tradeAmountT}}元</p>
          <h4>交易总额</h4>
          <p>￥{{tradeAmountA}}元</p>
          <ul>
            <li>1.企业交易监控套餐成交额：￥{{tradeAmountAM}}元</li>
            <li>2.企业法律服务成交额：￥{{tradeAmountAL}}元</li>
          </ul>
        </div>
        <div class="box">
          <h4>今日交易订单数</h4>
          <p>{{tradeOrderT}}笔</p>
          <h4>交易订单总数</h4>
          <p>{{tradeOrderA}}笔</p>
          <ul>
            <li>
              <li>1.企业交易监控套餐笔数：{{tradeOrderAM}}笔</li>
              2.企业法律服务笔数：{{tradeOrderAL}}笔
            </li>
          </ul>
        </div>
      </div>
      <div class="main">
        <h3>业务数据统计</h3>
        <div class="box">
          <h4>今日业务订单数</h4>
          <p>{{serviceOrderT}}笔</p>
          <h4>业务订单总数</h4>
          <p>{{serviceOrderA}}笔</p>
          <ul>
            <li>1.企业交易监控服务订单总笔数：{{serviceOrderAM}}笔</li>
            <li>2.企业法律服务订单总笔数：{{serviceOrderAL}}笔</li>
          </ul>
        </div>
        <div class="box">
          <h4>今日企业交易监控订单数</h4>
          <p>{{monitorOrderT}}笔</p>
          <h4>企业交易监控订单总数</h4>
          <p>{{monitorOrderA}}笔</p>
          <ul>
            <li>1.进行中：{{monitorOrderOn}}笔</li>
            <li>2.已终止：{{monitorOrderEnd}}笔</li>
            <li>3.已完成：{{monitorOrderDone}}笔</li>
          </ul>
        </div>
        <div class="box">
          <h4>今日法律服务订单数</h4>
          <p>{{legalOrderT}}笔</p>
          <h4>企业法律服务订单总数</h4>
          <p>{{legalOrderA}}笔</p>
          <ul>
            <li>1.进行中：{{legalOrderOn}}笔</li>
            <li>2.未支付：{{legalOrderUnpaid}}笔</li>
            <li>3.已终止：{{legalOrderEnd}}笔</li>
            <li>4.已完成：{{legalOrderDone}}笔</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
export default {
  data() {
    return {
      businessNumA: '',
      businessNumPass: '',
      businessNumRefuse: '',
      businessNumT: '',
      businessNumWait: '',
      lawfirmNumA: '',
      lawfirmNumPass: '',
      lawfirmNumRefuse: '',
      lawfirmNumT: '',
      lawfirmNumWait: '',
      lawyerNumA: '',
      lawyerNumPass: '',
      lawyerNumRefuse: '',
      lawyerNumT: '',
      lawyerNumWait: '',
      legalOrderA: '',
      legalOrderDone: '',
      legalOrderEnd: '',
      legalOrderOn: '',
      legalOrderT: '',
      legalOrderUnpaid: '',
      monitorOrderA: '',
      monitorOrderDone: '',
      monitorOrderEnd: '',
      monitorOrderOn: '',
      monitorOrderT: '',
      serviceOrderA: '',
      serviceOrderAM: '',
      serviceOrderT: '',
      tradeAmountA: '',
      tradeAmountAM: '',
      tradeAmountT: '',
      tradeOrderA: '',
      tradeOrderAM: '',
      tradeOrderT: '',
      tradeAmountAL: '',
      tradeOrderAL: ''
    }
  },
  mounted() {
    this.$http.get('/centerData/query').then(data => {
      if (data.data.httpCode === 200) {
        let list = data.data.data
        this.businessNumA = list.businessNumA
        this.businessNumPass = list.businessNumPass
        this.businessNumRefuse = list.businessNumRefuse
        this.businessNumT = list.businessNumT
        this.businessNumWait = list.businessNumWait
        this.lawfirmNumA = list.lawfirmNumA
        this.lawfirmNumPass = list.lawfirmNumPass
        this.lawfirmNumRefuse = list.lawfirmNumRefuse
        this.lawfirmNumT = list.lawfirmNumT
        this.lawfirmNumWait = list.lawfirmNumWait
        this.lawyerNumA = list.lawyerNumA
        this.lawyerNumPass = list.lawyerNumPass
        this.lawyerNumRefuse = list.lawyerNumRefuse
        this.lawyerNumT = list.lawyerNumT
        this.lawyerNumWait = list.lawyerNumWait
        this.legalOrderA = list.legalOrderA
        this.legalOrderDone = list.legalOrderDone
        this.legalOrderEnd = list.legalOrderEnd
        this.legalOrderOn = list.legalOrderOn
        this.legalOrderT = list.legalOrderT
        this.legalOrderUnpaid = list.legalOrderUnpaid
        this.monitorOrderA = list.monitorOrderA
        this.monitorOrderDone = list.monitorOrderDone
        this.monitorOrderEnd = list.monitorOrderEnd
        this.monitorOrderOn = list.monitorOrderOn
        this.monitorOrderT = list.monitorOrderT
        this.serviceOrderA = list.serviceOrderA
        this.serviceOrderAM = list.serviceOrderAM
        this.serviceOrderT = list.serviceOrderT
        this.tradeAmountA = list.tradeAmountA / 100
        this.tradeAmountAM = list.tradeAmountAM / 100
        this.tradeAmountT = list.tradeAmountT / 100
        this.tradeOrderA = list.tradeOrderA
        this.tradeOrderAM = list.tradeOrderAM
        this.tradeOrderT = list.tradeOrderT
        this.tradeAmountAL = list.tradeAmountAL / 100
        this.tradeOrderAL = list.tradeOrderAL
     } else {
        this.$toasted.show(data.data.msg)
      }
    }).catch(err => {
      console.log(err)
      this.$toasted.show('网络错误')
    })
  }
}

</script>
<style type="text/css" scoped>
.right-height {
  min-height: 700px;
}

.right-box h3 {
  margin: 30px 0 15px;
}

.main {
  margin: 0 -20px;
}

.box {
  border: 1px solid #ddd;
  height: 275px;
  vertical-align: top;
  margin: 0 25px;
}

.box {
  width: 250px;
  display: inline-block;
}

.box h4 {
  background-color: #d8e7ff;
  color: #3e3e3e;
  line-height: 30px;
  text-align: center;
}

.box p {
  text-align: center;
  line-height: 50px;
}

.right-box .main .box ul {
  border-top: 1px solid #ddd;
  padding: 13px 10px 0 10px;
  margin: 13px auto 0;
  width: 195px;
}

.right-box .main .box ul li {
  font-size: 12px;
  line-height: 20px;
}

.right-box .main:nth-of-type(2) .box:nth-of-type(1) ul {
  width: 240px;
}

</style>
